<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="点赞游记" navbarType='3'></wlk-navbar>
        <view class="pd30">
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <view class="mb20">
                    <u-alert title="左滑取消点赞" type="warning" center></u-alert>
                </view>
                <u-swipe-action>
                    <u-swipe-action-item v-for="(note, index) in list" :key="index"
                                         :options="options"
                                         @click="itemClick(index)"
                    >
                        <navigator :url="'/pages/note/detail?id='+note.id" class="relative wlkflex justify-between overHidden pt20 pl20 pr20 pb20">
                            <view class="detail-info wlkflex align-content-between wrap">
                                <view class="wd100">
                                    <view class="info-name u-line-2 bold">{{note.name}}</view>
                                    <view class="info-desc u-line-2">{{note.desc}}</view>
                                </view>
                                <view class="wd100 wlkflex col9 read-like justify-between">
                                    <view>阅读 {{note.read}}</view>
                                    <view class="wlkflex">
                                        <u-icon name="heart" color="#999999" size="15"></u-icon>
                                        <view class="ml05">{{note.like}}</view>
                                    </view>
                                </view>
                            </view>
                            <view class="detail-img relative">
                                <image class="wd100 hg100" lazy-load :src="note.image"  mode="aspectFill"/>
                                <view class="detail-auth bgw">
                                    <span class="mr05 bz">#</span>{{note.auth}}
                                </view>
                            </view>
                        </navigator>
                    </u-swipe-action-item>
                </u-swipe-action>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>
        </view>
        <u-modal :show="showModal" @confirm="confirm" title="提示" :content='content' @cancel="showModal=false" :confirmColor="themeColor" showCancelButton></u-modal>
    </view>
</template>

<script>
    var _self;
    import { mapGetters} from 'vuex';
    export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty']),
        },
        data() {
            return {
                options:[{
                    icon: 'heart-fill',
                    style: {
                        backgroundColor: '',
                        width: '40px',
                        height: '40px',
                        borderRadius: '100px',
                        margin: '0 6px',
                    }
                }],
                list:[],
                page: 1,
                choseIndex:'',
                showModal:false,
                content:'确认取消点赞游记?',
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
            };
        },
        onLoad() {
            _self = this;
        },
        onShow() {
            this.list = [];
            this.loadStatus = 'loading';
            this.page = 1;
            this.getData();
        },
        onReady() {
            this.options[0].style.backgroundColor = this.themeColor;
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            itemClick(index){
                this.choseIndex = index;
                this.showModal = true;
            },
            confirm(){
                uni.$u.http.post('note/setNoteLike', {id:this.list[this.choseIndex].id,type:'del'}).then(res => {
                    _self.showModal = false;
                    _self.list.splice(_self.choseIndex,1);
                });
            },
            async getData() {
                const res = await uni.$u.http.post("note/getLikeList", {
                    page: this.page,
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
        },
    };
</script>

<style lang="scss">
   .detail-info{
       height: 240rpx;
       width: 360rpx;
       .info-name{
           font-size: $font-lt;
       }
       .info-desc{
           font-size: $font-sm;
           color: $-color-muted;
           margin-top: 20rpx;
       }
       .read-like{
           font-size: $font-sm;
           width: 260rpx;
       }
   }
   .detail-img{
       width: 240rpx;
       height: 240rpx;
       image{
           border-radius: 2px;
       }
       .detail-auth{
           position: absolute;
           left: 10rpx;
           bottom: 10rpx;
           font-size: $font-sm;
           line-height: 36rpx;
           background-color: white;
           border-radius:2px;
           padding: 0 10rpx;
           .bz{
               color: #d40;
           }
       }
   }
   .u-swipe-action-item{
       margin-bottom: 20rpx;
       box-shadow: 0 2px 4px rgba(0,0,0,.06)!important;
       border-radius: 4px;
   }
</style>
